import { Table, message, Popconfirm, Space, Modal, Row, Col, List as AntdList, Card, Segmented } from "antd";
import { useModel, useOutletContext } from "umi";
import { Card as SemiCard, ButtonGroup, Button, List } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle, IconDelete, IconClose } from "@douyinfe/semi-icons";
import { useReactive } from "ahooks";
import { useEffect } from "react";

import useServicer from "../../hooks/useServicer";

const ServicersAuthedRecordPage = () => {
    const { UTCTimeToLocal } = useModel("global");
    const { selectedServicer, cardBodyHeight } = useOutletContext();
    const { dataLoading, loadCustomerAuthorizeRecords, authorizeRecords } = useServicer();

    useEffect(() => {
        selectedServicer?.oiUuid && loadCustomerAuthorizeRecords(selectedServicer.oiUuid);
    }, [selectedServicer]);

    return (
        <Table loading={dataLoading} dataSource={authorizeRecords} rowKey="oaaaUuid" bordered size="small" pagination={false} scroll={{ y: cardBodyHeight - 40 }}>
            <Table.Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
            <Table.Column title="客户名称" dataIndex="oiName" align="left" />
            <Table.Column title="授权的角色" dataIndex="oaaaRole" align="left" render={(_, r, i) => _.join(", ")} />
            <Table.Column title="授权的月数" dataIndex="oaaaMont" align="center" width={100} />
            <Table.Column title="授权方式" dataIndex="oaaaType" align="center" width={80} />
            <Table.ColumnGroup title="开发商结算">
                <Table.Column title="参考结算" dataIndex="oaaaSdpr" align="right" width={80} render={(_, r, i) => "￥" + helper.numberFormat(_, 0)} />
                <Table.Column title="实际结算" dataIndex="sdRepr" align="right" width={80} render={(_, r, i) => "￥" + helper.numberFormat(_, 0)} />
            </Table.ColumnGroup>
            <Table.ColumnGroup title="服务商结算">
                <Table.Column title="参考结算" dataIndex="oaaaSppr" align="right" width={80} render={(_, r, i) => "￥" + helper.numberFormat(_, 0)} />
                <Table.Column title="实际结算" dataIndex="spRepr" align="right" width={80} render={(_, r, i) => "￥" + helper.numberFormat(_, 0)} />
            </Table.ColumnGroup>
            <Table.Column title="客户结算" dataIndex="oaaaEcpr" align="right" width={80} render={(_, r, i) => "￥" + helper.numberFormat(_, 0)} />
        </Table>
    );
};

export default ServicersAuthedRecordPage;
